<template>
	<div class="cdList">
		<div class="commd_list">
			<div class="itens">
				<div class="nine_title">
					<div>
						<div class="bor_but"></div>
						<div class="nine_txt">抵扣商品</div>
						<div class="bor_but"></div>
					</div>
				</div>
		
				<!-- <div ref='wrapper' style="overflow: scroll;" class="comd" :style="{ height: wrapperHeight + 'px' }"> -->
				<div ref='wrapper'  class="comd" :style="{ height: (wrapperHeight-46) + 'px' }">
					<!-- <mt-loadmore 
								:top-method="loadTop"
								:bottom-method="loadBottom"
								:bottom-all-loaded="allLoaded"
								:auto-fill="false"
								ref="loadmore"> -->
					<mt-loadmore 
								:bottom-method="loadBottom"
								:bottom-all-loaded="allLoaded"
								:auto-fill="false"
								ref="loadmore">
						<ul id="goods-list" class="goods_list">
							<li v-for="(item,i) in commodityList" :key="i">
								
								<div class="good_img" @click="lookDetails(item)">
									<div>
										<img :src="item.product_image_url">
									</div>
								</div>
								<p class="title">{{item.name}}</p>
								<div class="pce_sum">
									<p class="price">抵扣价:￥<span>{{item.price}}</span></p>
									<!-- <p class="price"><span>￥{{item.price}}</span></p>
									<p class="price1"><span>￥{{item.price*2}}</span></p> -->
								</div>
							</li>
						</ul>
					</mt-loadmore>
					<div class="loading_finish" v-show="allLoaded">
					  加载完毕！
					</div>
				</div>
				
			</div>
		</div>
		<loading v-show="bool"></loading>
	</div>
</template>

<script>
	import loading from '../purchase/loading.vue';
	export default {
		data(){
			return{
				//记时
				hours: "00",
				minutes: "00",
				seconds: "00",
				
				commodityList:[],
				bool:false,
				pageNumBottom:1,
				allLoaded:false,//是否上拉
				wrapperHeight:0,//自适应高度
			}
		},
		mounted() {
			this.startTimer();
			// 父控件要加上高度，否则会出现上拉不动的情况
			   this.wrapperHeight =
			     document.documentElement.clientHeight -
			     this.$refs.wrapper.getBoundingClientRect().top;
		},
		created(){
			this.seckillList();
		},
		methods:{
			//倒计时
			countDown(maxtime) {
				let date = new Date();
				let gl = date.getTime();
				// 先算出剩余时间有多少小时，这些小时有多少个24小时 不满24小时的及为剩余多少小时
				this.hours = Math.floor(maxtime / 60 % 24);
				// 换算 多少分钟 满足60分的为小时数 不满60分的及为剩余分钟数
				this.minutes = Math.floor(maxtime / 60 % 60);
				// 满足60秒的为分钟数 不满60秒的及为剩余秒数
				this.seconds = Math.floor(maxtime % 60);
				//判断总的秒数是否小于=0 是则结束定时器
				if (maxtime <= 0) {
					return maxtime;
				}
				// var msg = "距离结束还有"+ this.hours +"时"+ this.minutes + "分" + this.seconds + "秒";
				// console.log(msg);
			},
			// 设置定时器
			startTimer() {
				var maxtime = 24 * 60 * 60;
				this.timer = setInterval(() => {
					var curTime = this.countDown(maxtime);
					if (curTime <= 0) {
						clearInterval(this.timer);
						this.timer = null;
					}
					--maxtime;
				}, 1000);
			},
			//商品详细
			lookDetails(item){
				// item.productImages=[{'imageUrl':item.product_image_url}];
				// item.seckTime=[{'seckTime':this.seckTime}];
				// localStorage.setItem("commdInfo",JSON.stringify(item));
				this.$router.push({path:'/stCommodityDetail',query:{
					id:item.id
				}})
			},
			//商品列表
			async seckillList(params=null){
				  if(params){
					 params={
					  pageNum:this.pageNumBottom,//页码
					  pageSize:10,//每页条数
					  salesMode:10,//商品类型，7普通商品，8动感地带，9实体联盟，10九块九包邮，11秒杀
					  // activityTime:"13",//
					 }; 
				  }
				this.bool=true; 
				const res = await this.$axios.post(this.$api.shopListData, params);
				if (res.success) {
				  this.commodityList = res.data.list;
						console.log(res);
				} else {
				  this.$toast(res.msg);
				}
				this.bool=false;
			},
			//下拉刷新·
			// loadTop() {
			// 	this.loadFrist();
			// },
			loadBottom() {
				this.loadMore();
			},
			//  // 上来刷新加载
			// async loadFrist() {
			// 	this.$store.commit('noLoadEnabled');
			// 	this.pageNumBottom = 1;
			// 	let params={
			// 		  pageNum:this.pageNumBottom,//页码
			// 		  pageSize:10,//每页条数
			// 		  salesMode:10,//商品类型，7普通商品，8动感地带，9实体联盟，10九块九包邮，11秒杀
			// 		  // activityTime:"13",//
			// 		 }; 
			// 	const res = await this.$axios.post(this.$api.shopListData, params);
			// 	if (res.success) {
			// 		this.commodityList = res.data.list;
			// 		this.$refs.loadmore.onTopLoaded();
			// 		this.isHaveMore(res.data.nextPage);
			// 	} else {
			// 	  this.$toast(res.msg);
			// 	}
			// 	this.$store.commit('yesLoadEnabled');
			// },
			// 加载更多
			async loadMore() {
				this.$store.commit('noLoadEnabled');
			  this.pageNumBottom += 1;
			  let  params={
				  pageNum:this.pageNumBottom,//页码
				  pageSize:10,//每页条数
				  salesMode:10,//商品类型，7普通商品，8动感地带，9实体联盟，10九块九包邮，11秒杀
				  // activityTime:"13",//
				}; 
			  const res = await this.$axios.post(this.$api.shopListData, params);
			  if (res.success) {
				  this.commodityList = this.commodityList.concat(res.data.list);
				  this.isHaveMore(res.data.nextPage);
				  this.$refs.loadmore.onBottomLoaded();
			  } else {
				this.$toast(res.msg);
			  }
			  this.$store.commit('yesLoadEnabled');
			},
			isHaveMore:function(isHaveMore){
			  // 是否还有下一页，如果没有就禁止上拉刷新
			  this.allLoaded = true; //true是禁止上拉加载
			  if(isHaveMore){
				this.allLoaded = false;
			  }
			},
		},
		components:{
			loading
		}
	
			
}
</script>

<style lang="scss">
	.cdList{
		.commd_list {
			padding: 0 8px;
		
			.nine_title {
				margin-bottom: 24px;
				.bor_but {
					width: 16px;
					border-bottom: 2px solid #fff;
					position: relative;
					bottom: 3px;
				}
		
				.nine_txt {
					color: #fff;
					font-size: 19px;
					position: relative;
					bottom: -9px;
					margin: 0 8px;
					font-weight: 700;
				}
			}
		
			.nine_title>div {
				display: flex;
				width: 50%;
				height: 28px;
				margin: 0 auto;
				position: relative;
				text-align: center;
				justify-content: center;
		
			}
		
			.itens {
				padding-top: 38px;
				border-radius: 5px;
			}
		
			.goods_list {
				display: flex;
				flex-wrap: wrap;
				padding-left: 6px;
		
				li {
					width: 48%;
					background-color: #FFFFFF;
					border-radius: 5px;
					box-sizing: border-box;
					padding: 10px;
					margin-bottom: 6px;
					margin-right: 6px;
					// 图片居中
				}
		
				.title {
					color: #333333;
					font-size: 12px;
					margin-top: 12px;
					height: 32px;
				}
		
				.pce_sum {
					display: flex;
					margin-right: 12px;
					padding-top: 12px;
					.price {
						font-size: 12px;
						color: #F82E2E;
						span{
							font-size: 15px;
							font-weight: 700;
						}
					}
				}
			}
		
			.good_img {
				width: 100%;
				div{
					// width: 150px;
					height: 150px;
					margin: 0 auto;
				}
			}
		
			img {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
